<template>
  <j-modal
    title="案件列表导出"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <!--//批量导入-->
    <a-spin :spinning="confirmLoading">
      <a-row>
        <a-col :span="24">
          <a-form-model-item label="导出条数" :labelCol="labelCol" :wrapperCol="wrapperCol">
            <a-input
              type="number"
              :min="0"
              v-model="exportSize"
              placeholder="请输入"
              allowClear
              oninput="value=value.replace(/[^\d]/g,'')"
            />
            <span style="color: #999">提示：根据输入的数量进行导出，不输入时默认导出筛选条件的全部数量</span>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <table class="table" width="100%" border="0">
            <tbody>
              <tr>
                <td width="180">
                  <a-checkbox :checked="checkAll" @change="onCheckAllChange"> 全部 </a-checkbox>
                </td>
                <td></td>
              </tr>
              <tr v-for="(item, index) in fieldArr" :key="index">
                <td>
                  <a-checkbox v-model="item.checkAll" @change="(val) => onCheckItemChange(val, item)">{{
                    item.title
                  }}</a-checkbox>
                </td>
                <td>
                  <a-checkbox-group v-model="item.checkedList" @change="(val) => onChange(val, item)">
                    <a-row :gutter="[16, 16]" type="flex">
                      <template v-for="(obj, index) in item.arr">
                        <a-col :span="6" :key="index">
                          <a-checkbox :key="obj.field" :value="obj.field">
                            {{ obj.label }}
                          </a-checkbox>
                        </a-col>
                      </template>
                    </a-row>
                  </a-checkbox-group>
                </td>
              </tr>
            </tbody>
          </table>
        </a-col>
      </a-row>
    </a-spin>
  </j-modal>
</template>

<script>
import { downLoadMix } from '@/utils/export-util/util'
import * as caseApi from '@/api/modules/case.js'

export default {
  props: {
    form: {
      type: Object
    }
  },
  data() {
    return {
      title: '',
      width: 1000,
      visible: false,
      disableSubmit: false,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      confirmLoading: false,
      exportSize: null,
      indeterminate: false,
      checkAll: true,
      fieldArr: [
        {
          title: '列表字段',
          arr: [
            { field: 'theCaseNumber', label: '案件编号' },
            { field: 'caseName', label: '案件名称' },
            { field: 'fraudType', label: '诈骗类型' },
            { field: 'nameOfVictim', label: '受害人姓名' },
            { field: 'lossOfRmb', label: '损失人民币' },
            { field: 'caseStatus', label: '案件状态' },
            { field: 'crimeTools', label: '作案工具' },
            { field: 'caseOfTime', label: '立案时间' }
          ],
        },
        {
          title: '详情字段',
          arr: [
            { field: 'caseHandlingUnit', label: '办案单位' },
            { field: 'timeOfCrime', label: '案发时间' },
            { field: 'createTime', label: '数据入库时间' },
            { field: 'acceptanceUnit', label: '受理单位' },
            { field: 'caseHandler', label: '办案人' },
            { field: 'sentencedPerson', label: '判刑人' },
            { field: 'contactNumber', label: '联系电话' },
            { field: 'victimGender', label: '受害人性别' },
            { field: 'victimOccupation', label: '受害人职业' },
            { field: 'victimsEducation', label: '受害人学历' },
            { field: 'victimIdCard', label: '受害人身份证号码' },
            { field: 'ageOfVictim', label: '受害人年龄' },
            { field: 'fraudType', label: '诈骗类型（下属）' },
            { field: 'accidentDescription', label: '案情描述' },
            { field: 'investigationPlatform', label: '录入部级侦办平台' },
            { field: 'nameOfSuspect', label: '嫌疑人姓名' },
            { field: 'suspectIdNumber', label: '嫌疑人身份证号' },
            { field: 'startTimeDetention', label: '刑拘开始时间' },
            { field: 'stopTimeDetention', label: '刑拘结束时间' },
            { field: 'placeCriminalDetention', label: '刑拘地点' },
            { field: 'suspectAccountName', label: '嫌疑人账户名' },
            { field: 'suspectAccountNumber', label: '嫌疑人账号' },
            { field: 'victimAccountType', label: '受害人账号类型' },
            { field: 'suspectAccountType', label: '嫌疑人账号类型' },
            { field: 'transferTime', label: '转账时间' },
            { field: 'vctimAccountNumber', label: '受害人账号' },
            { field: 'transferMethod', label: '转账方式' },
            { field: 'remittanceAmount', label: '汇款金额（元）' },
            { field: 'suspectTelephone', label: '嫌疑人电话' },
            { field: 'socialAccount', label: '社交账号' },
            { field: 'socialTools', label: '社交工具' },
            { field: 'websiteInvolved', label: '涉案网址' },
            { field: 'updateBy', label: '编辑人' },
            { field: 'updateTime', label: '编辑时间' }
          ],
        },
      ],
      checkedLists: [],
      getSelectKeyDatas: [],
      queryVO: {},
    }
  },
  computed: {
    allFields() {
      let datas = []
      for (let index in this.fieldArr) {
        if (this.fieldArr[index].arr) {
          datas = datas.concat(this.fieldArr[index].arr)
        }
      }
      return datas
    },
  },
  watch: {
    fieldArr: {
      immediate: true,
      deep: true,
      handler(val) {
        let arr = val.map((i) => i.checkedList).filter((obj) => obj !== undefined)
        this.checkedLists = this.flatten(arr)
        if (this.checkedLists.length === this.allFields.length) {
          Object.assign(this, { checkAll: true })
        } else {
          Object.assign(this, { checkAll: false })
        }
      },
    },
  },
  created() {
    // 初始化全选
    let e = { target: { checked: true } }
    this.onCheckAllChange(e)
  },
  methods: {
    add() {
      this.visible = true
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
    handleOk() {
      let params = {
        exportFields: this.checkedLists,
        exportSize: this.exportSize,
        idList: this.getSelectKeyDatas,
        ...this.form
      }
      this.confirmLoading = true
      caseApi.exportXls(params).then(async (res) => {
        if (res && res.size > 0) {
          const fileName = '案件列表.xls'
          await downLoadMix(res, fileName)
          this.confirmLoading = false
          this.$emit('ok')
        } else {
          this.$message.warn('导出失败！')
        }
      })
    },
    onCheckAllChange(e) {
      let checkedList = this.allFields.map((i) => i.field).filter((obj) => obj !== undefined)
      let fieldArr = JSON.parse(JSON.stringify(this.fieldArr))
      fieldArr.forEach((element) => {
        element.checkedList = e.target.checked ? element.arr.map((i) => i.field) : []
        element.checkAll = e.target.checked
      })
      Object.assign(this, {
        checkAll: e.target.checked,
        checkedList: e.target.checked ? checkedList : [],
        fieldArr: fieldArr,
      })
    },
    onCheckItemChange(val, item) {
      if (val.target.checked) {
        item.checkedList = item.arr.map((i) => i.field)
      } else {
        item.checkedList = []
      }
    },
    onChange(checkedList, item) {
      item.checkAll = checkedList.length === item.arr.length
    },
    flatten(arr) {
      return arr.reduce((prev, next) => {
        return prev.concat(Array.isArray(next) ? this.flatten(next) : next)
      }, [])
    },
  },
}
</script>
<style lang="less" scoped>
@color: #e8e8e8;
.table {
  border:1px solid @color;
  tr {
    td {
      padding: 8px;
      border-left:1px solid @color;
      border-bottom:1px solid @color;
      &:first-child {
        background-color: #81d3f82a;
        border-left-width:0;
      }
    }
    &:last-child {
      td {
        border-bottom-width:0;
      }
    }
  }
}
</style>
